<template>
  <div class="user">
    <h1>个人中心</h1>
    
    <!-- 个人信息卡片 -->
    <div class="user-card">
      <div class="user-header">
        <div class="avatar">
          <img :src="userInfo.avatar" alt="用户头像">
          <button class="change-avatar" @click="handleChangeAvatar">更换头像</button>
        </div>
        <div class="user-info">
          <h2>{{ userInfo.username }}</h2>
          <p>{{ userInfo.email }}</p>
        </div>
      </div>

      <!-- 编辑表单 -->
      <div class="edit-form" v-if="isEditing">
        <div class="form-item">
          <label>用户名</label>
          <input type="text" v-model="editForm.username">
        </div>
        <div class="form-item">
          <label>邮箱</label>
          <input type="email" v-model="editForm.email">
        </div>
        <div class="form-item">
          <label>手机号</label>
          <input type="tel" v-model="editForm.phone">
        </div>
        <div class="form-item">
          <label>地址</label>
          <textarea v-model="editForm.address"></textarea>
        </div>
        <div class="form-actions">
          <button class="save-btn" @click="saveUserInfo">保存</button>
          <button class="cancel-btn" @click="cancelEdit">取消</button>
        </div>
      </div>

      <!-- 信息展示 -->
      <div class="info-display" v-else>
        <div class="info-item">
          <span class="label">用户名：</span>
          <span>{{ userInfo.username }}</span>
        </div>
        <div class="info-item">
          <span class="label">邮箱：</span>
          <span>{{ userInfo.email }}</span>
        </div>
        <div class="info-item">
          <span class="label">手机号：</span>
          <span>{{ userInfo.phone }}</span>
        </div>
        <div class="info-item">
          <span class="label">地址：</span>
          <span>{{ userInfo.address }}</span>
        </div>
        <button class="edit-btn" @click="startEdit">编辑信息</button>
      </div>
    </div>

    <!-- 订单历史 -->
    <div class="order-history">
      <h2>订单历史</h2>
      <div class="order-list">
        <div v-for="order in orders" :key="order.id" class="order-item">
          <div class="order-header">
            <span class="order-id">订单号：{{ order.id }}</span>
            <span class="order-status" :class="order.status">{{ order.statusText }}</span>
          </div>
          <div class="order-content">
            <img :src="order.image" :alt="order.name">
            <div class="order-info">
              <h3>{{ order.name }}</h3>
              <p>下单时间：{{ order.time }}</p>
              <p>订单金额：¥{{ order.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const isEditing = ref(false)
const userInfo = ref({
  username: localStorage.getItem('username') || '用户名',
  email: '2318937702@qq.com',
  phone: '19103098562',
  address: '广东省广州市从化区',
  avatar: 'public/images/as.jpg'
})

const editForm = ref({ ...userInfo.value })

const orders = ref([
  {
    id: '202401010001',
    name: '金毛幼犬',
    price: 2999,
    time: '2024-01-01 12:00:00',
    status: 'completed',
    statusText: '已完成',
    image: 'public/images/R-C.jpg'
  },
  {
    id: '202401020001',
    name: '英短蓝猫',
    price: 3999,
    time: '2024-01-02 15:30:00',
    status: 'shipping',
    statusText: '运输中',
    image: 'public/images/19.png'
  }
])

const startEdit = () => {
  editForm.value = { ...userInfo.value }
  isEditing.value = true
}

const cancelEdit = () => {
  isEditing.value = false
}

const saveUserInfo = () => {
  userInfo.value = { ...editForm.value }
  localStorage.setItem('username', userInfo.value.username)
  isEditing.value = false
}

const handleChangeAvatar = () => {
  // TODO: 实现头像上传功能
  alert('头像上传功能开发中...')
}
</script>

<style scoped>
.user {
  padding: 20px;
}

.user-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  position: relative;
  margin-right: 20px;
}

.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.change-avatar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.user-info h2 {
  margin: 0 0 10px 0;
}

.user-info p {
  margin: 0;
  color: #666;
}

.form-item {
  margin-bottom: 15px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-item input,
.form-item textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-item textarea {
  height: 80px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.save-btn,
.cancel-btn,
.edit-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn {
  background: #42b983;
  color: white;
}

.cancel-btn {
  background: #666;
  color: white;
}

.edit-btn {
  background: #42b983;
  color: white;
  margin-top: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.info-item .label {
  color: #666;
  margin-right: 10px;
}

.order-history {
  margin-top: 30px;
}

.order-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.order-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.order-status.completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.order-status.shipping {
  background: #e3f2fd;
  color: #1565c0;
}

.order-content {
  display: flex;
  align-items: center;
}

.order-content img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.order-info h3 {
  margin: 0 0 5px 0;
}

.order-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}
</style> 